分享人：王栋
1.背景介绍
2.知识剖析
3.常见问题
4.解决方案
5.编码实战
6.扩展思考
7.参考文献
8.更多讨论
在javaScript中，this是动态绑定的，它可以是全局对象、当前对象或者任意对象，这完全取决于函数的调用方式。 这就导致了this具备了多重含义，可以使得this可以更灵活地使用。 但是，带来了灵活性的同时也会给我们初学者带来不少困惑。 简而言之, this 是一个特殊的标识符关键字 —— 在每个 function 中自动根据作用域(scope) 确定, 指向的是此次调用的 “所有者,owner”。
在全局函数中，this就是window，当函数被作为某个对象的方法调用时，this就是那个对象， 匿名函数的执行具有全局性，也就是说，匿名函数this指向window。
全局环境中的this
function a(){
console.log(this);
}
a();
这里调用了a函数，而a函数的执行环境是全局环境，这里的this也就指向了全局变量window。
严格模式 ‘use strict’下的this
'use strict';
function a(){
this.user = "hello";
console.log(this);
console.log(this.user);
}
a();
console.log(user)
原因：严格模式下这种调用方式会报错，如果不用严格模式，可能你不知不觉中就定义了几个全局变量。
在javaScript中，不一定只有对象方法的上下文中才有this， 全局函数调用和其他的几种不同的上下文中也有this指代。 它可以是全局对象、当前对象或者任意对象，这完全取决于函数的调用方式。JavaScript 中函数的调用有以下几种方式：作为对象方法调用，作为函数调用，作为构造函数调用，和使用 apply 或 call 调用。
1.作为对象方法调用:this指向该对象本身
var point = {
x : 0,
y : 0,
moveTo : function(x, y) {
console.log(this);
this.x = this.x + x;
this.y = this.y + y;
}
};
point.moveTo(1, 1);
console.log(point.x);
var car = {
brand: "Nissan",
getBrand: function(){
console.log(this.brand);
console.log(this);
console.log(this===car);
}
};
car.getBrand();
var brand = 'Nissan';
var myCar = {brand: 'Honda'};
var getBrand = function() {
console.log(this.brand);
};
myCar.getBrand = getBrand;
myCar.getBrand();
// output: Honda
getBrand();
// output: Nissan
2.作为函数调用:this指向全局对象
function a(x) {
this.x = x;
}
a(5);
console.log(this.x);
console.log(x)
console.log(window.x)
3.作为构造函数调用:this 绑定到新创建的对象上
function Point(){
this.x = 1;
}
var a = new Point;
console.log(a.x)
var x = 2;
function test(){
this.x = 1;
}
var a = new test();
console.log(a.x)
console.log(x)
注：构造函数不使用new调用，则和普通函数一样。一般地，构造函数首字母大写
4.使用 apply 或 call 调用：当使用apply和call时，表示把一个函数表达式放入call或apply括号后面的第一个参数的环境中， this则指向这个参数；两者不同的地方在于apply第二个参数必须是个数组。简言之就是apply或者call谁，this就指向谁
function Point(x, y){
this.x = x;
this.y = y;
this.moveTo = function(x, y){
this.x = x;
this.y = y;
}
}
var p1 = new Point(0, 0);
console.log(p1);
var p2 = {x: 0, y: 0};
p1.moveTo(1, 1);
console.log(p1);
p1.moveTo.apply(p2, [10, 10]);
console.log(p1);
console.log(p2);
var obj = {
name: 'qiutc',
foo: function() {
console.log(this);
},
foo2: function() {
console.log(this);
setTimeout(this.foo, 1000);
}
}
obj.foo2();
异步回调函数中的this指向问题，现象：两次打印的this不一样
'use strict';
var obj = {
name: 'qiutc',
foo: function() {
console.log(this);
},
foo2: function() {
console.log(this);
setTimeout(this.foo, 1000);
}
}
obj.foo2();
现象：加了严格模式，this仍然指向了window
setTimeout()其实全名为window.setTimeout()，是window下面的一个方法，不管是否是严格模式，指向的都是window。
1.将this赋给一个变量，然后通过闭包来访问这个变量来打印出我们想要的值。
var obj = {
name: 'qiutc',
foo: function() {
console.log(this);
},
foo2: function() {
console.log(this);
var _this = this;
setTimeout(function() {
console.log(this); // Window
console.log(_this); // Object {name: "qiutc"}
}, 1000);
}
}
obj.foo2();
2.使用bind()将执行环境放到obj这个对象中去，可以用this代替。
var obj = {
name: 'qiutc',
foo: function() {
console.log(this);
},
foo2: function()
var _this = this;
setTimeout(function() {
console.log(this); //Object {name: "qiutc"}
}.bind(this), 1000);
}
}
obj.foo2();
3.使用ES6中的箭头函数。
var obj = {
name: 'qiutc',
foo: function() {
console.log(this);
},
foo2: function() {
console.log(this);
setTimeout(() => {
console.log(this); // Object {name: "qiutc"}
}, 1000);
}
}
obj.foo2();
箭头函数中的 this 只和定义它时候的作用域的 this 有关，而与在哪里以及如何调用它无关，同时它的 this 指向是不可改变的。
window.val = 1;
var obj = {
val: 2,
dbl: function () {
this.val *= 2;
val *= 2;
console.log(val);
console.log(this.val);
}
};
// 说出下面的输出结果
obj.dbl();
var func = obj.dbl;
func()
问题：如何了解this到底指向谁？
1.当函数作为对象的方法调用时，this指向该对象。
2.当函数作为单独函数调用时，this指向全局对象（严格模式时，为undefined）
3.构造函数中的this指向新创建的对象
4.嵌套函数中的this不会继承上层函数的this，可以用前面讲过的三种方法来使this指向宿主对象。 apply和call，bind调用或者绑定的this，指向相应的对象
感谢大家观看
BY : 姚磊 | 王栋